iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
Modern Web

建立響應式網頁系列 第 6

學習css grid 布局

  • 分享至 

  • xImage
  •  

css grid布局是一個強大的CSS布局系統,允許將頁面分割成行和列,從而構建複雜的二維佈局。與Flexbox的一維佈局(單行或單列)不同,Grid提供更靈活的方式來同時處理行和列。
基本概念
1.Grid容器(Container):Grid 布局的父元素,定義了網格的行與列。
2.Grid項目(Items):放置在Grid容器內的子元素,這些項目將按照指定的行列規則排列。
要啟用 Grid 布局,必須將父容器的display屬性設置為grid。
定義行和列
使用grid-template-columns和grid-template-rows來定義網格的列和行。

  1. grid-template-columns
    定義列的寬度。可以使用具體的像素、百分比、fr(fraction,代表可用空間的比例)等單位。
    2.grid-template-rows
    定義行的高度。
    設置網格間距
    使用 grid-gap 或分別使用 grid-row-gap 和 grid-column-gap 設置行與列之間的間距。
    放置Grid項目
    Grid項目會自動按照行和列的順序排列,但你可以指定它們跨越的行數和列數。
    1.grid-column
    定義項目跨越的列數或開始/結束的位置。可以用grid-column-start和grid-column-end來指定。
    2.grid-row
    定義項目跨越的行數或開始/結束的位置。可以用grid-row-start和grid-row-end來指定。
    自動排列與對齊
    1.justify-items和align-items
    • justify-items 定義項目在網格橫軸上的對齊方式(即列內的對齊)。
    • align-items 定義項目在網格縱軸上的對齊方式(即行內的對齊)。
    可選值包括:
    • start:靠起始邊對齊
    • end:靠結束邊對齊
    • center:居中對齊
    • stretch;項目拉伸以填滿網格單元
    2.justify-content和align-content
    這些屬性用來對整個網格進行對齊,類似於justify-items和align-items,但作用範圍是整個網格。
    css grid 布局

上一篇
學習flexbox 的基本用法
下一篇
學習使用google Fonts 或其他往上字體服務來提升網站的視覺效果
系列文
建立響應式網頁31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言